<template>
    <div>
        <h3 class="page_title" >子路由1</h3>
        <p>
           当前路由参数id： {{$route.params.id}}
        </p>
        <button @click="pageBack" >返回</button>
    </div>
</template>

<script>
    import { defineComponent,watch } from 'vue';
    import { useRoute,useRouter,onBeforeRouteUpdate  } from 'vue-router'
    export default defineComponent({
        name:'child01',
        setup () {
            const route = useRoute()
            const router = useRouter()

            const pageBack = () => {
                router.go(-1)
            }

            watch(() => route.params.id,(o,n) => {
                console.log(o,n,'我在监听路由')
            },{
                immediate:true
            })
            return {
                pageBack
            }
        },
        beforeRouteEnter(to,from,next){
            console.log(to,from,'===beforeRouteEnter===')
            next()
        }
    })
</script>

<style lang="less" scoped>

</style>